<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<base href="${BaseContext }">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Material-Detail JSP</title>
<!-- 引入css -->
<link rel="stylesheet" href="assets/css/amazeui.min.css">
<link rel="stylesheet" href="assets/css/app.css">
<link rel="stylesheet" href="assets/css/demo.css">
<link rel="stylesheet" href="static/css/bootstrap.min.css">
<link rel="stylesheet" href="static/css/font-awesome.min.css">
<link rel="stylesheet" href="assets/css/wangEditor.css">
<!-- 引入JQuery  js-->
<script src="static/js/jquery-3.2.1.min.js"></script>
<script src="assets/js/amazeui.min.js"></script>
<script src="static/js/bootstrap.min.js"></script>
<script src="assets/js/wangEditor.js"></script>
</head>
<body>

	<!-- 顶栏  -->
	<jsp:include page="include/top.jsp"></jsp:include>

	<div class="am-g">
		<div class="am-u-sm-2">
			<!-- menu -->
			<jsp:include page="include/menu.jsp"></jsp:include>
		</div>
		<div class="am-u-sm-10">
			<!-- 个人信息面板-->
			<div class="am-panel am-panel-default">
			  	<div class="am-panel-hd">评估材料</div>
			  	<div class="am-panel-bd">
					<!-- 材料列表 -->
					<div class="am-g">
						<div class="am-u-sm-4">
							
							<div class="row">
								<div class="col-md-offset-1 col-md-10">
									<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
										<div class="panel panel-default" id="material-div">
											<div class="panel-heading" role="tab" id="headingOne">
												<h4 class="panel-title">
													<a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
														材料依据
													</a>
												</h4>
											</div>
											<div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
												<div class="panel-body">
													<ul class="list-grop">
														<c:forEach items="${dataList }" var="material" varStatus="i">
															<li class="list-grop-item"><a href="javascript:;" remark="${material.k }" materialpath="${material.v }" onclick="showDetails(this);">${i.count}.&nbsp;${material.k }</a></li>
														</c:forEach>
													</ul>
												</div>
											</div>
										</div>
					
										<div class="panel panel-default" id="summary-div">
											<div class="panel-heading" role="tab" id="headingThree">
												<h4 class="panel-title">
													<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
														报告总结
													</a>
												</h4>
											</div>
											<div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
												<div class="panel-body">
													<ul class="list-grop">
														<li class="list-grop-item"><a href="javascript:;" type="课程总结" onclick="showSummary(this);">1.课程总结</a></li>
														<li class="list-grop-item"><a href="javascript:;" type="工作总结" onclick="showSummary(this);">2.工作总结</a></li>
													</ul>
												</div>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
						
						<div class="am-u-sm-8" id="upload-div">
							<!-- 文件域 -->
							<div class="am-form-group">
								<p>文件类别：<span id="fileType-span"></span></p>
							</div>
							
							<form id="fileForm"  action="teacher/uploadFiles.do" method="post" enctype="multipart/form-data">
								<input type="hidden" id="fileType-input" name="fileType" value="">
								<span style="color: red">支持上传.doc .docx .rtf .xls .xlsx .ppt .pptx .pdf .zip .rar .7z .wps WPS文字格式</span>
								<div class="am-form-group am-form-file">
									<button type="button" class="am-btn am-btn-default am-btn-sm am-fr">
										<i class="am-icon-cloud-upload"></i>选择要上传的文件</button>
									<input type="file" name="mfile" id="doc-form-file">
								</div>
								<div class="am-form-group">
									<p id="file-list"></p><br />
								</div>
								<div class="am-form-group">
									<button type="button" id="submit-btn" class="am-btn am-btn-default am-btn-sm">确认上传</button>
								</div>
							</form>
							<!-- 文件显示 -->
							<div class="am-form-group">
								<span id="filePath-span"></span>
							</div>
						</div>
						
						<div class="am-u-sm-8" id="text-div" style="display: none">
							<div class="am-form-group">
								<p>总结类型：<span id="textType-span"></span></p>
							</div>
							<div id="editor" style="display: none">
						        <p id="summary-content"></p>
						    </div>
						    <br>
						    <div class="am-form-group">
								<button onclick="sub();" type="button" class="am-btn am-btn-primary am-radius" >确认提交总结报告</button>
							</div>
						</div>
					</div>
					
				</div>
			</div>
		</div>
	</div>

	<!-- footer -->
	<jsp:include page="include/footer.jsp"></jsp:include>
	<!-- 富文本编辑器 -->
	<script type="text/javascript">
        var E = window.wangEditor
        var $editor = new E('#editor');
        $editor.create();
        function sub(){
            var type = $('#textType-span').html();
        	var summary = $editor.txt.html();
        	$.post('teacher/saveSummary.do',{summary:summary,type:type},function(){
				window.location.reload();
           	},'json');
        }
        function showSummary(obj){
			var type = $(obj).attr('type');
			$('#textType-span').html(type);
			/* ajax加载summary信息 */
			$.post('teacher/getSummary.do',function(data){
				if(data.success){
					if(type=='课程总结'){
						$('#summary-content').html(data.courseSummary);	
					}else if(type=='工作总结'){
						$('#summary-content').html(data.jobSummary);	
					}
				}else{
					$('#summary-content').html('');	
				}
					$('#editor').show();
			},'json');
        }
    </script>
	<!-- 控制div切换 -->
	<script type="text/javascript">
		$(function(){
			$('#material-div').on('click',function(){
				$('#upload-div').show();
				$('#text-div').hide();
			});
			$('#summary-div').on('click',function(){
				$('#upload-div').hide();
				$('#text-div').show();
			});
		});
	</script>
	<!-- 上传文件文件名显示 -->
	<script type="text/javascript">
		$(function() {
			//上传文件显示文件名
			$('#doc-form-file').on('change', function() {
				var fileNames = '';
				$.each(this.files, function() {
					fileNames += '<span class="am-badge am-fr" title="点击取消选择文件">已选择文件：' + this.name + '</span> ';
				});
				$('#file-list').html(fileNames);
	
				$('.am-badge').each(function (i) {
					$(this).click(function () {
						$(this).remove();
						$('#doc-form-file').val('');
					});
				});
	
			});
			
		});
	</script>

	<!-- 材料文件在线查看、下载 -->
	<script type="text/javascript">
		function showDetails(obj){
			$(obj).parent().addClass('active').siblings('li.active').removeClass('active');
			$('#fileType-span').html('');
			var fileType = $(obj).attr('remark');
			var materialPath = $(obj).attr('materialpath');
			var onlinePath = 'http://ow365.cn/?i=14626&furl='+materialPath;
			$('#fileType-span').html(fileType);
			//判断文件地址是不是以http开头的
			var pathStart = materialPath.indexOf('http');
			if(pathStart == 0){//是以http开头的
				$('#filePath-span').html('<a href="'+onlinePath+'" target="_blank">在线预览</a><hr><a href="javascript:;" materialPath="'+materialPath+'" onclick="downloadFile(this);">下载查看</a>');
			}else if(pathStart == -1){//不是以http开头的
				$('#filePath-span').html('还没有提交相应材料文件!');
			}
		}
		function downloadFile(obj){
			//alert($(obj).attr('materialPath'));
			var filePath = $(obj).attr('materialPath');
			alert('文件正在下载...');
			$.post('teacher/downloadFile.do',{filePath:filePath},function(result){
				if(result.success){
					alert('文件下载成功\n本地地址为：'+result.downPath);
				}
			},'json');
		}
		$(function(){
			$('#submit-btn').on('click',function(){
				var fileType = $('#fileType-input').val();
				if(fileType==null || fileType==''){
					alert('文件类别未选择，请选择后再操作');
				}else{
					$('#fileForm').submit();
				}
			});
		});
	</script>
</body>

</html>
